// main.js
import React,{ useState,useEffect } from 'react';
import { Button, Card, Col, Divider, Empty, Modal, Pagination, Row,Tag } from 'antd';
import mainpage_bg from '../img/shipSRM/mainpage_bg.png'
import './mainpage.css'
import useStore from '../components/useStore.js'
import store from '../untils/store.js';
import TextArea from 'antd/lib/input/TextArea.js';
import request from '../untils/request.js';

const Mainpage = () => {

  const { collapsed } = useStore()
  const {sysInfo} = store()
  const [notices,setnotices]=useState([])//查询出来的通知信息列表
  const [notice,setnotice]=useState({})//查询出来的通知信息
  const [currentPage,setcurrentPage]=useState(1)
  const [total,settotal]=useState(0)
  const [showModal,setshowModal]=useState(false)

  const openDetail=async (id)=>{
    setshowModal(true)
    request("/admin/notice/getNoticeById", {
        method: 'POST',
        mode: 'cors',
        body:{
            id:id
        }
    }).then(data => {
        setnotice(data)
    })
  }

  const closeModal=async ()=>{
    setshowModal(false)
  }

  const changePage=async (e)=>{
    setcurrentPage(e)
    request("/admin/notice/getNotices", {
        method: 'POST',
        mode: 'cors',
        body:{
            pageSize:10,
            offset:(e-1)*10
        }
    }).then(data => {
        setnotices(data.data)
    })
  }

    useEffect(()=>{
        request("/admin/notice/getNotices", {
            method: 'POST',
            mode: 'cors',
            body:{
                pageSize:10,
                offset:0
            }
        }).then(data => {
            setnotices(data.data)
            settotal(data.total)
        })
    },[])

  return (
    <div style={{ height: "86%", backgroundColor: `#F1F1F1`, right: "1%", top: "4vh", overflow: "hidden",
        backgroundSize: "100% 100%", width: collapsed ? "94%" : "84%", position: "absolute", fontSize: "0.8rem" }}>
      <div style={{ position: "fixed", right: "0", top: "6vh", width: collapsed ? '94%' : '85%', height: "94vh",
        backgroundImage: `url(${mainpage_bg})`, backgroundSize: '100% 100%' }}>
        <div style={{ height: "100%", width: "100%", position: "absolute", top: "0", left: "0", backgroundColor: "rgba(236, 236, 236, 0.5)", backdropFilter: "blur(1px)", WebkitBackdropFilter: "blur(1px)" }}>
          <div style={{ width: '100%', height: "100%", position: 'relative', backgroundImage: "linear-gradient(to bottom right,rgba(255,255,255,0.1) ,rgba(255,255,255,0.1) 30%,rgba(255,255,255,0))" }}>
            <div style={{ marginLeft: '2.5vw', marginRight: '2.5vw', display: 'flex', justifyContent: 'space-between' }}>
                <Card style={{width:"100%",marginTop:"2vh"}} title="通知">
                    {
                        notices.length==0?
                        (<div>
                            <Empty/>
                        </div>):
                        (<div>
                            <Row gutter={24}>
                                <Col span={3}>序号</Col>
                                <Col span={10}>标题</Col>
                                <Col span={8}>发布时间</Col>
                                <Col span={3}>操作</Col>
                            </Row>
                            {notices.map((item,index)=>{
                                return <Row gutter={24}>
                                    <Col span={3}>{index+1}</Col>
                                    <Col span={10}>{item.title}</Col>
                                    <Col span={8}>{item.create_time}</Col>
                                    <Col span={3} onClick={()=>{openDetail(item.id)}}><Button>详情</Button></Col>
                                </Row>
                            })}
                            <Pagination
                                currentPage={currentPage}
                                onChange={changePage}
                                total={total}
                            />
                        </div>)
                    }
                </Card>
            </div>
            <Divider style={{ fontSize: "0.8rem", color: "#414341", position: 'absolute', bottom: '1vw' }}>{sysInfo.company_name}</Divider>
            <Modal
                title={notice.title}
                open={showModal}
                onCancel={closeModal}
                footer={null}
            >
                <Tag>{notice.type==0?"一般":notice.type==1?"批评":"表扬"}</Tag>
                <TextArea style={{height:"50vh"}} disabled value={notice.content}/>
                发布时间：{notice.create_time}
            </Modal>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Mainpage